<template>
	<nt-container bg-color="#F2F4F6" v-model="scrollHeight">
		<!-- 加班记录 -->
		<view class="h_content">
			<u-sticky :offsetTop="offsetTop" bgColor="#F2F4F6">
				<view class="h_subsection">
					<view :class="params.nav_status == 1 ? 'h_btn h_active' : 'h_btn'" @click="menuClick(1)">未处理</view>
					<view :class="params.nav_status == 2 ? 'h_btn h_active' : 'h_btn'" @click="menuClick(2)">已处理</view>
				</view>
			</u-sticky>
			<template v-if="list.length >0">
				<u-list
					@scrolltolower="getUserOverTime"
					enableBackToTop
					refresher-enabled
					refresher-background="#F2F4F6"
					refresher-threshold="50"
					:height="`${listHeight}px`"
				>
					<view class="h_list">
						<view class="h_box" v-for="(item,index) in list" :key="index">
							<!-- <view class="h_text h_t1">订单信息：</view> -->
							<view class="" @click="Jump(`/subpackage/order/pages/_id?id=${item.order.id}`)">
								<template v-if="item.orderreal">
									<view class="h_text h_row">
										<view class="h_L">
											<text class="h_t2" style="margin-right: 6rpx;">[{{item.orderreal.is_type ? item.orderreal.is_type : ''}}单]</text>
											<text class="h_t3">{{item.orderreal.customername}} {{item.orderreal.customerphone}}</text>
										</view>
										<text class="h_t3">{{item.orderreal.is_city_review ? '订单已审核' : '订单未审核'}}</text>
									</view>
									<view class="h_text">
										<text class="h_t4">{{item.orderreal.address}}</text>
									</view>
								<view class="h_hr"></view>
								</template>
								<view class="h_row">
									<view class="h_L">
										<text class="h_t1">申请人：</text>
										<text class="h_t4">{{item.user_name}}</text>
									</view>
									<view class="h_R">
										<text class="h_t1">状态：</text>
										<text class="h_t2">{{item.status_text}}</text>
									</view>
								</view>
								<view class="h_text">
									<text class="h_t1">申请时间：</text>
									<text class="h_t4">{{item.create_date}}</text>
								</view>
								<view class="h_text">
									<text class="h_t1">备注：</text>
									<text class="h_t4">{{item.remarks}}</text>
								</view>
							</view>
							
							<nt-upload :images="item.images ? item.images : []" mode="preview"></nt-upload>
							<view class="h_btns">
								<view class="h_btn" @click.stop="Jump(`./edit?id=${item.id}`)">修改</view>
								<view class="h_btn" @click.stop="delClick(item.id)">删除</view>
							</view>
						</view>
					</view>
				</u-list>
			</template>
			<u-empty icon="https://cdn.uviewui.com/uview/empty/data.png" v-else></u-empty>
		</view>
		
	</nt-container>
</template>

<script>
import { getOverTime, delOverTime} from "@/api"
	export default {
		data() {
			return {
				offsetTop:0,
				params: {
					nav_status:1,
					page: 1,
					limit: 10
				},
				list:[],
				load_more:true,
				scrollHeight: 0,
			}
		},
		
		computed: {
			listHeight(){
				let convention = this.scrollHeight - 50;
				return convention
			}
		},
		onShow() {
			this.getUserOverTime()
		},
		methods: {
			menuClick(e){
				console.log(this.params.nav_status)
				if(e != this.params.nav_status){
					this.load_more = true
					let params = {
						nav_status:e,
						page: 1,
						limit: 10
					}
					this.params = params
					this.getUserOverTime()
				}
				
			},
			Jump(href){
				uni.navigateTo({
					url: href,
				});
			},
			getUserOverTime(){
				let that = this
				let params = that.params
				if(!that.load_more) return;
				getOverTime(params).then(res => {
					let data = res.data.data;
					if(that.params.page == 1){
						that.list = []
					}
					that.list = that.list.concat(data);
					if(that.params.page >= data.last_page || that.list.length< 1){
						that.load_more = false;
					}
					that.params.page++
				})
			},
			editClick(e){
				console.log(e);return;
				
			},
			// 删除
			delClick(e){
				let that = this
				uni.showModal({
					content:'确认删除这条记录？',
					success: function (res) {
						if (res.confirm) {
							console.log('用户点击确定');
							delOverTime({id:e}).then(res => {
								let code = res.code
								if(code !== 1) return;
								let params = that.params
								if(params > 1){
									params.page--
								}
								this.toast("删除成功")
								setTimeout(function(){
									that.getUserOverTime()
								},1000)
							})
							
							// postCancel({"date": date,}).then(res => {
							// 	const { code, data } = res;
							// 	console.log(code,1111)
							// 	if(code === 1){
							// 		that.toast("修改成功")
							// 		setTimeout(function(){
							// 			that.getUserMonthDate()
							// 		},1000)
									
							// 	}
							// })
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				})
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	.h_content{
		padding: 32rpx;
		.h_subsection{
			display: flex;
			border:2rpx solid #DDDDDD;
			.h_btn{
				width: 50%;
				text-align: center;
				line-height: 70rpx;
				color: rgb(45, 127, 253);
				&.h_active{
					background: #2D7FFD;
					color: #fff;
				}
			}
		}
		.h_list{
			margin-top: 32rpx;
			.h_box{
				margin-bottom: 20rpx;
				box-shadow: 2rpx 2rpx 10rpx rgba(0, 0, 0, 0.2);
				padding: 32rpx;
				background: #fff;
				border-radius: 10rpx;
				font-size: 30rpx;
				.h_text{margin-bottom: 6rpx;}
				.h_t1{
					color: #777;
				}
				.h_t2{
					color: #f00;
				}
				.h_t3{
					color: #2D7FFD;
				}
				.h_hr{
					height: 1px;background: #DFDFDF;
					margin: 10rpx 0;
				}
				.h_row{
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-bottom: 6rpx;
				}
				.h_btns{
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-top: 8rpx;
					.h_btn{
						width: 180rpx;
						line-height: 60rpx;
						text-align: center;
						background: #2D7FFD;
						color: #fff;
						border-radius: 8rpx;
						&:nth-child(2){
							background: #f00;
						}
					}
				}
			}
		}
	}
	
</style>
